<template>
	<div class="login-container">
		<div class="login-content">
			<div class="login-box">
				<div class="welcome-section">
					<div class="brand">
						<h2 class="brand-title">NexAdmin</h2>
						<p class="brand-desc">Next Generation Admin Dashboard</p>
					</div>
					<div class="illustration">
						<NexSignIllustration type="register" />
					</div>
				</div>
				<div class="form-section">
					<div class="form-header">
						<h2>Create Account</h2>
						<p>Please fill in the form to continue</p>
					</div>
					<el-form
						ref="formRef"
						:model="form"
						:rules="rules"
						class="login-form"
						@keyup.enter="onRegister">
						<el-form-item prop="username">
							<el-input
								v-model="form.username"
								placeholder="Username"
								:prefix-icon="User" />
						</el-form-item>

						<el-form-item prop="email">
							<el-input
								v-model="form.email"
								placeholder="Email"
								:prefix-icon="Message" />
						</el-form-item>

						<el-form-item prop="password">
							<el-input
								ref="passwordInputRef"
								v-model="form.password"
								:type="passwordVisible ? 'text' : 'password'"
								placeholder="Password"
								:prefix-icon="Lock">
								<template #suffix>
									<el-icon
										class="cursor-pointer password-toggle"
										@click="onTogglePasswordVisibility">
										<component :is="passwordVisible ? 'Hide' : 'View'" />
									</el-icon>
								</template>
							</el-input>
						</el-form-item>

						<el-form-item prop="confirmPassword">
							<el-input
								v-model="form.confirmPassword"
								:type="passwordVisible ? 'text' : 'password'"
								placeholder="Confirm Password"
								:prefix-icon="Lock" />
						</el-form-item>

						<div class="form-options">
							<el-checkbox v-model="agreeToTerms">
								I agree to the Terms of Service
							</el-checkbox>
						</div>

						<el-button
							type="primary"
							class="submit-btn"
							:loading="loading"
							:disabled="!agreeToTerms"
							@click="onRegister">
							{{ loading ? "Creating Account..." : "Create Account" }}
						</el-button>

						<div class="register-link">
							Already have an account?
							<router-link to="/sign/login"> Sign in </router-link>
						</div>
					</el-form>
				</div>
			</div>
		</div>

		<div class="background-decoration">
			<div class="gradient-circle circle-1" />
			<div class="gradient-circle circle-2" />
			<div class="gradient-circle circle-3" />
		</div>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import type { FormInstance } from "element-plus";
import { ElMessage } from "element-plus";
import { User, Lock, Message, CircleCheckFilled } from "@element-plus/icons-vue";
import { useDebounceFn } from "@vueuse/core";
import { NexSignIllustration } from "@/components";
import { useRequest } from "@/hooks/useRequest";
import { register } from "@/api/user";

interface RegisterForm {
	username: string;
	email: string;
	password: string;
	confirmPassword: string;
}

const router = useRouter();

const form = reactive<RegisterForm>({
	username: "",
	email: "",
	password: "",
	confirmPassword: "",
});

const formRef = ref<FormInstance>();
const passwordInputRef = ref();
const loading = ref(false);
const passwordVisible = ref(false);
const agreeToTerms = ref(false);

const rules = {
	username: [
		{ required: true, message: "Please enter your username", trigger: "blur" },
		{ min: 3, message: "Username must be at least 3 characters", trigger: "blur" },
	],
	email: [
		{ required: true, message: "Please enter your email", trigger: "blur" },
		{ type: "email", message: "Please enter a valid email address", trigger: "blur" },
	],
	password: [
		{ required: true, message: "Please enter your password", trigger: "blur" },
		{ min: 6, message: "Password must be at least 6 characters", trigger: "blur" },
	],
	confirmPassword: [
		{ required: true, message: "Please confirm your password", trigger: "blur" },
		{
			validator: (rule: unknown, value: string) => {
				if (value !== form.password) {
					return Promise.reject("Passwords do not match");
				}
				return Promise.resolve();
			},
			trigger: "blur",
		},
	],
};

const { requestState, onSubmitRequest } = useRequest(register);

const onShowSuccessMessage = () => {
	ElMessage({
		message: "Registration successful!",
		type: "success",
		icon: markRaw(CircleCheckFilled),
	});
};

const onRegisterSuccess = () => {
	onShowSuccessMessage();
	router.push("/sign/login");
};

const onRegisterError = (error: any) => {
	if ("message" in error) {
		ElMessage.error(error.message);
	}
};

const onRegisterProcess = () => {
	const { confirmPassword, ...registerData } = form;
	onSubmitRequest(
		{
			onSuccess: result => {
				onRegisterSuccess();
			},
			onError: onRegisterError,
		},
		registerData
	);
};

const onRegisterValidate = useDebounceFn(async (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	await formEl.validate((valid: boolean) => {
		if (valid) {
			if (!agreeToTerms.value) {
				ElMessage.warning("Please agree to the Terms of Service");
				return;
			}
			onRegisterProcess();
		}
	});
}, 300);

const onRegister = (formEl: FormInstance | undefined) => {
	onRegisterValidate(formEl);
};

const onTogglePasswordVisibility = () => {
	passwordVisible.value = !passwordVisible.value;
};
</script>

<style scoped lang="scss">
// 使用与登录页面相同的样式
.login-container {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
}

.login-content {
	width: 100%;
	max-width: 1200px;
	padding: 2rem;
	position: relative;
	z-index: 1;
}

.login-box {
	display: flex;
	background: white;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
	overflow: hidden;
}

.welcome-section {
	flex: 1;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	padding: 4rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: white;

	.brand {
		.brand-title {
			font-size: 2.5rem;
			font-weight: 700;
			margin-bottom: 1rem;
		}

		.brand-desc {
			font-size: 1.1rem;
			opacity: 0.9;
		}
	}

	.illustration {
		img {
			width: 100%;
			max-width: 400px;
		}
	}
}

.form-section {
	flex: 1;
	padding: 4rem;
	background: white;

	.form-header {
		margin-bottom: 2rem;
		text-align: center;

		h2 {
			font-size: 2rem;
			color: #2c3e50;
			margin-bottom: 0.5rem;
		}

		p {
			color: #7f8c8d;
		}
	}
}

.login-form {
	max-width: 400px;
	margin: 0 auto;

	.el-form-item {
		margin-bottom: 1.5rem;
	}

	.el-input {
		:deep(.el-input__wrapper) {
			box-shadow: none;
			border: 1px solid #dcdfe6;
			border-radius: 8px;
			height: 48px;

			&.is-focus {
				border-color: #409eff;
				box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.1);
			}
		}

		:deep(.el-input__prefix) {
			margin-left: 10px;
		}
	}
}

.form-options {
	margin-bottom: 1.5rem;
}

.submit-btn {
	width: 100%;
	height: 48px;
	border-radius: 8px;
	font-size: 1.1rem;
	margin-bottom: 1.5rem;

	&:disabled {
		opacity: 0.7;
		cursor: not-allowed;
	}
}

.register-link {
	text-align: center;
	color: #7f8c8d;

	a {
		color: #409eff;
		text-decoration: none;

		&:hover {
			text-decoration: underline;
		}
	}
}

.background-decoration {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
}

.gradient-circle {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	opacity: 0.5;
}

.circle-1 {
	width: 600px;
	height: 600px;
	background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	top: -200px;
	right: -100px;
}

.circle-2 {
	width: 450px;
	height: 450px;
	background: linear-gradient(135deg, #23a6d5 0%, #23d5ab 100%);
	bottom: -150px;
	left: -150px;
}

.circle-3 {
	width: 300px;
	height: 300px;
	background: linear-gradient(135deg, #ff0844 0%, #ffb199 100%);
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

@media (max-width: 1024px) {
	.welcome-section {
		display: none;
	}
}

.password-toggle {
	cursor: pointer;
	color: #606266;
	font-size: 16px;
	margin-right: 10px;

	&:hover {
		color: #409eff;
	}
}

.custom-message {
	background: #f0f9eb;
	border-color: #e1f3d8;
}
</style>
